<template>
  <view class="food-detail">
    
    <!-- 食物基本信息 -->
    <view class="food-basic-info">
      <image class="food-image" src="/static/logo.png" mode="aspectFill"></image>
      <view class="food-name">西红柿炒鸡蛋</view>
      <view class="food-calories">120 千卡 / 100克</view>
    </view>
    <!-- 重量比例 -->
    <view class="section weight-ratio">
      <view class="section-header">
        <view class="section-title">重量比例</view>
        <view class="section-info">
          <text class="info-icon">i</text>
          <text class="info-text">重量估算示例</text>
        </view>
      </view>
      
      <view class="weight-table">
        <view class="table-header">
          <view class="table-cell">单位</view>
          <view class="table-cell">重量</view>
          <view class="table-cell">热量</view>
        </view>
        
        <view class="table-row">
          <view class="table-cell">盘</view>
          <view class="table-cell">400克</view>
          <view class="table-cell">240千卡</view>
        </view>
        
        <view class="table-row">
          <view class="table-cell">碟</view>
          <view class="table-cell">100克</view>
          <view class="table-cell">60千卡</view>
        </view>
        
        <view class="table-row">
          <view class="table-cell">份</view>
          <view class="table-cell">100克</view>
          <view class="table-cell">60千卡</view>
        </view>
      </view>
    </view>
    
    <!-- 营养价值 -->
    <view class="section nutrition-value">
      <view class="section-header">
        <view class="section-title">营养价值</view>
        <view class="section-info">
          <text class="info-icon">i</text>
        </view>
      </view>
      
      <view class="nutrition-list">
        <view class="nutrition-item">
          <view class="nutrition-name">
            <view class="color-tag carbs"></view>
            <text>碳水化合物</text>
          </view>
          <view class="nutrition-percentage">22.90%</view>
          <view class="nutrition-weight">3.58克</view>
        </view>
        
        <view class="nutrition-item">
          <view class="nutrition-name">
            <view class="color-tag protein"></view>
            <text>蛋白质</text>
          </view>
          <view class="nutrition-percentage">22.90%</view>
          <view class="nutrition-weight">3.58克</view>
        </view>
        
        <view class="nutrition-item">
          <view class="nutrition-name">
            <view class="color-tag fat"></view>
            <text>脂肪</text>
          </view>
          <view class="nutrition-percentage">22.90%</view>
          <view class="nutrition-weight">3.58克</view>
        </view>
      </view>
      
      <!-- 营养比例图 -->
      <view class="nutrition-chart">
        <view class="chart-placeholder">
          <!-- 实际项目中这里应该是一个环形图 -->
          <view class="chart-text">热量占比</view>
        </view>
      </view>
      
      <view class="more-nutrition-btn">
        更多营养元素
      </view>
    </view>
    
    <!-- 主要食材 -->
    <view class="section main-ingredients">
      <view class="section-header">
        <view class="section-title">主要食材</view>
      </view>
      
      <view class="ingredients-list">
        <view class="ingredient-item">西红柿</view>
        <view class="ingredient-item">鸡蛋</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 食物详情数据
      foodDetail: {
        name: '西红柿炒鸡蛋',
        calories: 120,
        unit: '100克',
        image: '/static/logo.png',
        weightRatio: [
          { unit: '盘', weight: '400克', calories: '240千卡' },
          { unit: '碟', weight: '100克', calories: '60千卡' },
          { unit: '份', weight: '100克', calories: '60千卡' }
        ],
        nutrition: [
          { name: '碳水化合物', percentage: 22.90, weight: 3.58, color: 'carbs' },
          { name: '蛋白质', percentage: 22.90, weight: 3.58, color: 'protein' },
          { name: '脂肪', percentage: 22.90, weight: 3.58, color: 'fat' }
        ],
        ingredients: ['西红柿', '鸡蛋']
      }
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 查看更多营养元素
    viewMoreNutrition() {
      // 实际项目中可能会跳转到详细营养页面或展开更多营养信息
      uni.showToast({
        title: '查看更多营养元素',
        icon: 'none'
      });
    }
  }
}
</script>

<style lang="scss">
.food-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
  
  // 导航栏
  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #fff;
    
    .back-icon {
      width: 44rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
    }
    
    .action-icons {
      display: flex;
      gap: 30rpx;
      
      .iconfont {
        font-size: 44rpx;
      }
    }
  }
  
  // 食物基本信息
  .food-basic-info {
    background-color: #fff;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    .food-image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
    }
    
    .food-name {
      font-size: 32rpx;
      font-weight: 500;
      margin-bottom: 10rpx;
    }
    
    .food-calories {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  // 通用部分样式
  .section {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: 500;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 30rpx;
          background-color: #3498db;
          border-radius: 3rpx;
        }
      }
      
      .section-info {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        
        .info-icon {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          border: 1px solid #ddd;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10rpx;
        }
      }
    }
  }
  
  // 重量比例表格
  .weight-table {
    width: 100%;
    
    .table-header, .table-row {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
    }
    
    .table-header {
      background-color: #f9f9f9;
      font-weight: 500;
    }
    
    .table-cell {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      font-size: 28rpx;
    }
    
    .table-row:nth-child(even) {
      background-color: #f9f9f9;
    }
  }
  
  // 营养价值
  .nutrition-list {
    .nutrition-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .nutrition-name {
        flex: 1;
        display: flex;
        align-items: center;
        
        .color-tag {
          width: 16rpx;
          height: 16rpx;
          border-radius: 4rpx;
          margin-right: 10rpx;
          
          &.carbs {
            background-color: #4cd964;
          }
          
          &.protein {
            background-color: #ff9500;
          }
          
          &.fat {
            background-color: #ff3b30;
          }
        }
      }
      
      .nutrition-percentage, .nutrition-weight {
        width: 120rpx;
        text-align: right;
        font-size: 28rpx;
      }
    }
  }
  
  // 营养比例图
  .nutrition-chart {
    display: flex;
    justify-content: center;
    margin: 30rpx 0;
    
    .chart-placeholder {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: linear-gradient(90deg, #4cd964 33%, #ff9500 33%, #ff9500 66%, #ff3b30 66%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #fff;
      }
      
      .chart-text {
        font-size: 24rpx;
        color: #333;
        position: relative;
        z-index: 1;
      }
    }
  }
  
  // 更多营养元素按钮
  .more-nutrition-btn {
    width: 100%;
    height: 80rpx;
    background-color: #f0f0f0;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    margin-top: 20rpx;
  }
  
  // 主要食材
  .ingredients-list {
    display: flex;
    flex-direction: column;
    
    .ingredient-item {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
